<template>
  <cj-popup v-model="isShowPresent" round position="bottom" class="c-bg-transparent" @close="closePresent">
    <div class="c-w100 bg-present c-ph64 c-pt180 c-pb40">
      <div class="c-flex-column c-fs24 c-fc-xblack">
        <span class="c-mt20">1.通过该入口购买的{{ckFromTitle}}，自己不可看，只能转送给一位好友看（比如：家长买给孩子学习）；</span>
        <span class="c-mt20">2.{{ckFromTitle}}分享给好友，当对方领取成功后，才算赠送成功；</span>
        <span class="c-mt20">3.通过个人中心<span class="c-fw600">“我的-领赠记录”</span>，可以查看赠送和领取明细。</span>
      </div>
      <div class="c-ww400 c-hh72 c-flex-row c-flex-center c-br36 c-mlr-auto c-fs28 c-fc-white btn-bg c-mt28" @click="goPresent">立即赠送</div>
      <div class="c-w100 c-hh120 c-pa c-p-l0 c-p-b0 c-bg-white c-pz-1"></div>
    </div>
  </cj-popup>
  <!-- <div class="masker" @click.self="closePresent">
    <section class="content c-flex-column c-aligni-center c-pv40 c-ph24">
      <div class="close" @click="closePresent()"><span class="iconfont c-fs36 c-fc-sgray">&#xe61b;</span></div>
      <img src="@/assets/i/wap/course/book.png" class="c-block c-hh200 c-ww120" />
      <h2 class="c-fs30 c-fc-smblue c-fw-n c-lh">赠人玫瑰，手有余香</h2>
      <div class="c-mt32 c-flex-column c-fs24 c-fc-xblack c-w90">
        <span class="c-mt20">1.通过该入口购买的{{ckFromTitle}}，自己不可看，只能转送给一位好友看（比如：家长买给孩子学习）；</span>
        <span class="c-mt20">2.{{ckFromTitle}}分享给好友，当对方领取成功后，才算赠送成功；</span>
        <span class="c-mt20">3.通过个人中心“我的-领赠记录”，可以查看赠送和领取明细。</span>
      </div>
      <div class="c-w100 c-hh80 c-lh80 c-textAlign-c theme-bg c-fc-white c-fs28 c-mt44" style="border-radius:1rem;" @click="goPresent">立即赠送</div>
    </section>
  </div> -->
</template>

<script>
export default {
  name: 'PresentMasker',
  components: {

  },
  props: {
    isShowPresent: Boolean,
    ckFromTitle: {
      type: String,
      default: '课程'
    }
  },
  beforeCreate() {

  },
  data() {
    return {
      showPresent: false
    }
  },
  created() {
    this.showPresent = this.isShowPresent;
  },
  mounted() {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    closePresent: function () {
      this.$emit('closePresent');
    },
    goPresent: function () {
      this.$emit('goPresent');
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content {
  width: 100%;
  max-width: 16rem;
  z-index: 1003;
  background-color: #fff;
}
.content > div > img {
  width: 1.2rem;
  height: 2.2rem;
  position: absolute;
  top: 0.4rem;
  right: 0.3rem;
  z-index: 1004;
}
.masker {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1002;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-end;
}
.close {
  position: absolute;
  right: 0.6rem;
}
.bg-present {
  /* height: 14rem; */
  background: url("../../../assets/i/wap/course/present-bg.png") no-repeat;
  background-size: 100% auto;
}
.btn-bg {
  background-image: linear-gradient(180deg, #FFBCBC 0%, #FF2D2D 100%);
}
</style>
